<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>优惠券 - 个人中心</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/userCenter.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/index.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<div id="app">
    <div class="app-container" data-reactid=".0">
        <div class="layout" data-reactid=".0.0">
            <div class="hContent headerInfo">
                <header th:replace="~{commons::#top}"/>
                <div class="bottom_bar" data-reactid=".0.0.0.1">
                    <span class="before" data-reactid=".0.0.0.1.0"></span>
                    <span class="after" data-reactid=".0.0.0.1.1"></span>
                </div>
            </div>
            <div class="icontainer clearfix" data-reactid=".0.0.1">
                <div class="left-menu" data-reactid=".0.0.1.0">
                    <dl data-reactid=".0.0.1.0.0">
                        <dt data-reactid=".0.0.1.0.0.0">
                            <a th:href="@{/order/list}" data-reactid=".0.0.1.0.0.0.0"><i class="icon-my-order"
                                                                                         data-reactid=".0.0.1.0.0.0.0.0"><img
                                    th:src="@{/images/icon-my-order.png}" data-reactid=".0.0.1.0.0.0.0.0.0"/></i><span
                                    data-reactid=".0.0.1.0.0.0.0.1">我的订单</span></a>
                        </dt>
                    </dl>
                    <dl data-reactid=".0.0.1.0.1">
                        <dt data-reactid=".0.0.1.0.1.0">
                            <div data-reactid=".0.0.1.0.1.0.0">
                                <i class="icon-my-account" data-reactid=".0.0.1.0.1.0.0.0"><img
                                        th:src="@{/images/icon-my-account.png}" data-reactid=".0.0.1.0.1.0.0.0.0"/></i>
                                <span data-reactid=".0.0.1.0.1.0.0.1">我的账户</span>
                            </div>
                        </dt>
                        <dd data-reactid=".0.0.1.0.1.1">
                            <a class="" th:href="@{/user/userAccount}" data-reactid=".0.0.1.0.1.1.0">账户余额</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.2">
                            <a class="" th:href="@{/user/userPay}" data-reactid=".0.0.1.0.1.2.0">充值</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.3">
                            <a class="active" th:href="@{/user/discount}" data-reactid=".0.0.1.0.1.3.0">优惠券</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.4">
                            <a class="" th:href="@{/user/usualInfo}" data-reactid=".0.0.1.0.1.5.0">常用信息</a>
                        </dd>
                        <dd data-reactid=".0.0.1.0.1.5">
                            <a class="" th:href="@{/user/initcost}" data-reactid=".0.0.1.0.1.5.0">消费统计</a>
                        </dd>
                    </dl>
                    <dl data-reactid=".0.0.1.0.3">
                        <dt data-reactid=".0.0.1.0.3.0">
                            <div data-reactid=".0.0.1.0.3.0.0">
                                <i class="icon-settings" data-reactid=".0.0.1.0.3.0.0.0"><img
                                        th:src="@{/images/icon-settings.png}" data-reactid=".0.0.1.0.3.0.0.0.0"/></i>
                                <span data-reactid=".0.0.1.0.3.0.0.1">设置</span>
                            </div>
                        </dt>
                        <dd data-reactid=".0.0.1.0.3.1">
                            <a class="" th:href="@{/user/updatepwd}" data-reactid=".0.0.1.0.3.1.0">修改密码</a>
                        </dd>
                    </dl>
                </div>

                <div class="right-container" data-reactid=".0.0.1.1">
                    <div class="my-account" data-reactid=".0.0.1.1.0">
                        <div class="my-balance" data-reactid=".0.0.1.1.0.0">
                            <span data-reactid=".0.0.1.1.0.0.0">您当前拥有折扣券：</span>
                            <span class="my-balance-hl" data-reactid=".0.0.1.1.0.0.1">
                                <span data-reactid=".0.0.1.1.0.0.1.0"><th:block th:text="${discountTotal}"></th:block></span>
                                <span data-reactid=".0.0.1.1.0.0.1.1">张</span>
                            </span>
                        </div>

                        <table id="discountList" lay-filter="discountList" class="layui-hide"></table>
                    </div>
                    <!--显示数据条数-->
                    <!--<div id="totalCount" align="right"></div>-->
                </div>
            </div>

            <footer th:replace="~{commons::#footer}"/>
        </div>
    </div>
</div>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['laypage', 'layer', 'table'], function () {
        var laypage = layui.laypage,
            layer = layui.layer,
            $ = layui.jquery,
            table = layui.table;

        table.render({
            elem: '#discountList'
            , height: 460
            , url: '/user/discountList' //数据接口
            ,limit: 8
            ,limits: [8, 16, 24]
            , totalRow: true
            , cols: [
                [
                    {field: 'zz', title: '序号', width: 60, align: 'center', type: 'numbers'}
                    , {field: 'name', title: '名称', sort: true, width: 120, align: 'center'}
                    , {field: 'discount', title: '折扣率', sort: true, width: 100, align: 'center'}
                    , {field: 'expiryDate', title: '有效期', sort: true, width: 100, align: 'center'}
                    , {field: 'time', title: '截止时间', sort: true, width: 200, align: 'center'}
                    , {field: 'time', title: '是否过期', sort: true, width: 120, align: 'center',
                        templet: function (res) {
                            var endTime = new Date(res.time).getTime();
                            var current = new Date().getTime();
                            if (endTime < current){
                                return "<span style='color: #942a25'>已过期</span>"
                            }
                            if (endTime > current){
                                return "<span style='color: #1d943b'>可使用</span>"
                            }
                        }
                    }
                    , {field: 'time', title: '操作', width: 125, align: 'center',
                        templet: function (res) {
                        console.log(res);
                            var endTime = new Date(res.time).getTime();
                            var current = new Date().getTime();
                            if (endTime < current){
                                return "<a href='javascript:void(0)'  class='layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled'>删除</a>"
                            }
                            if (endTime > current){
                                return "<a href='/order/create' title='去使用'  class='layui-btn layui-btn-xs layui-btn-radius'>使用</a>"
                            }
                        }
                    }

                ]
            ]
            , page: true //开启分页
        });
    });
</script>
<script type="text/html" id="zz">
    {{d.LAY_TABLE_INDEX+1}}
</script>
</body>
</html>